<template>
  <div class="address-page flex-col">
    <navbar :back="isBack" title="评价" @goBack="goBack"/>
    <scroll-view class="address-container flex-1" scroll-y>
      <div class="clear-10"></div>
      <div class="goods-info-box flex-1">
       <div class="goods-item" v-for="(item, dex) in orderInfo" :key="item.id">
         <div class="goods-info-top flex-row-v-center">
           <img :src="item.cover_img_url" class="goods-img"/>
           <div class="flex-1 flex-col-space-between goods-info-top-right">
             <div class="title-txt">
               {{item.goods_name}}
             </div>
             <div class="rate flex-row-v-center">
               <div class="weui-rate-wrap">
                 <ul class="weui-rate">
                   <li class="weui-rate-item" v-for="n in max" :key="index"
                       :class="{'weui-rate-item-active' : index < item.level}" :data-index='index' @click="selectRate(index, dex)">
                     <div class="weui-rate-item-def"></div>
                   </li>
                 </ul>
               </div>
               <div class="weui-cells__title">{{item['rateScore']}}</div>
             </div>
           </div>
         </div>
         <div class="textarea-box flex-col-v-center">
           <textarea v-model="item['content']" placeholder="东西好用吗，评价一下能帮助更多人"/>
         </div>
       </div>





      </div>



      <div class="btn-box flex-center">
        <div class="btn flex-center" @click="onClickSave">保存</div>
      </div>

    </scroll-view>
  </div>
</template>

<script>
  import global from 'global'
  import navbar from '@/components/navbar'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,
        isBack: true,
        max: 5,
        rateScore: '好',
        rateScoreDesc: ['非常差', '差', '一般', '好', '非常好'],
        tempValue: 3,

        order: {},
        content: '',

        orderInfo: []
      }
    },

    mounted () {
      let id = this.$root.$mp.query['order_id']
      this._getOrderDetail(id)
    },

    methods: {
      goBack () {
        Core.Util.goBack()
      },

      selectRate (index, dex) {
        this.orderInfo[dex].level = index + 1
        this.orderInfo[dex]['rateScore'] = this.rateScoreDesc[index]
      },

      onClickSave () {
        let orderId = this.order.id
        let dataArr = []
        this.orderInfo.forEach(item => {
          dataArr.push({
            'order_id': orderId,
            'goods_id': item.id,
            'level': item.level,
            'content': item.content
          })
        })
        let data = JSON.stringify(dataArr)
        this._saveGoodsEvaluation(orderId, data, () => {
          Core.Util.goBack()
        })
      },

      _saveGoodsEvaluation (orderId, data, callback) {
        Core.Api.Goods.batchSaveGoodsEvaluation(orderId, data)
          .then(res => {
            callback(res)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getOrderDetail (orderId) {
        Core.Api.Order.orderDetail(orderId)
          .then(res => {
            let order = res.order
            this.order = res.order
            this.orderInfo = order.order_info_list
            this.orderInfo.forEach(item => {
              this.$set(item, 'level', 4)
              this.$set(item, 'rateScore', this.rateScoreDesc[3])
            })
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .address-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .address-container {
      height: 100%;
      overflow-y: auto;
    }

    .goods-info-box {
      width: 100%;
      .goods-info {
        width: 240px;
        img {
          width: 82px;
          height: 82px;
        }

      }


    }

    .textarea-box {
      background-color: #FFFFFF;
      textarea {
        font-size: 14px;
        width: 100%;
        height: 50px;
        padding: 20px 12px;
      }
    }

    .btn-box {
      width: 100%;
      padding: 30px 20px;
      .btn {
        border-radius: 35px;
        background-image: linear-gradient(to right, #83c5fd, #65deeb);
        box-shadow: 0 1px 8px 0 rgba(102, 220, 236, 0.75);
        width: 115px;
        height: 35px;
        color: #ffffff;
      }
    }


    .goods-item {
      background: #FFFFFF;
      padding: 10px 12px;
      & + .goods-item {
        margin-top: 10px;
      }
      border-bottom: 1px solid rgb(240, 240, 240);
    }
    .goods-img {
      width: 80px;
      height: 80px;
      border: 1px solid #efeff4;
      margin-right: 10px;
    }
    .title-txt {
      margin-top: 10px;
      font-size: 14px;
      color: rgb(86, 86, 86)
    }
    .goods-info-top-right {
      height: 80px;
      align-items: flex-start;
    }
  }
</style>
